<style type="text/css">
    #change_password_form {width: 250px; }
    #change_password_form #forgotpwd {border-bottom: 1px solid #FFF; cursor: pointer; }
    #change_password_form * {border: none; }
    #change_password_form .k-checkbox {display: table-cell; vertical-align: middle; }
    #change_password_form_html p {margin-bottom: 10px; }
    #change_password{background: #000; color: white; }
    #change_password_logo_top {text-align: center; border-right: 1px solid white; height: 250px; }
    #change_password_logo_min {float: left; margin: 30px 0 0 50px; }
    #change_password_copyrightLabel {position: absolute; width: 100%; bottom: 20px; color: #FFF; text-align: left; background: #000; z-index: 9;margin-left: 20px }
    input.btn{color: #3f52b8;background-color: #f6f8ff;border:0px;padding:2px 6px;margin:0px 6px;font-size:95%;text-align:center;}
    .btnOnFcs{color: #3f52b8;background-color: #f6f8ff;border:0px;padding:2px 6px;margin:0px 6px;font-size:95%;text-align:center;}
    .btnOnMseOvr{color: #3f52b8;background-color: #ffefb2;border:0px;padding:2px 6px;margin:0px 6px;font-size:95%;text-align:center;}
    .btnOnMseDwn{color: #000000;background-color: #ffefb2;border:0px solid #ffccd0;padding:2px 6px;margin:0px 6px;font-size:95%;text-align:center;}
    .wp_fz_14{margin-bottom: 5px;line-height: 25px}
    .wrng{color:#F8D328;}
</style>
<div id="change_password">
    <div class="container">
        <div class="row">
            <div class="col_7_12">
                <div class="change_password_logo_min" id="change_password_logo_min">
                    <img src="imgs/login/loginWorkportLogo.png" alt="">
                </div>
                <div class="change_password_logo_top" id="change_password_logo_top">
                    <img src="imgs/login/starbucksLogo_118x138.png" alt="" class="login_logo_big">
                    <p id="login_welcomeLabel" class="wp_fz_13"></p>
                </div>
            </div>
            <form action="/CookieAuth.dll?ChangePwd" method="post" id="logonForm" autocomplete="off">
            <div class="col_5_12" id="change_password_form_html">
                <div id="change_password_form">
                 <table cellpadding="0" cellspacing="0">
                    <tr>
                        <td class="wrng" style="visibility:visbile">@@INSERT_USER_TEXT</td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td style="visibility:visible">@@INSERT_MSG_TEXT</td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                    </tr>
              </table>   
                    <p>
                        <lable for="old_pwdLabel">
                            <span class="wp_fz_14" id="old_pwdLabel"></span>:
                            <br>
                            <input type="password" name="password" id="password"  maxlength="16" class="wp_w_250 wp_h_30 k-textbox" >
                        </lable>
                        <br>
                        <!-- <input type="checkbox" name="rember" id="rember" class="k-checkbox"> <span class="wp_fz_11" id="remberpwd"> </span> -->&nbsp;&nbsp;&nbsp;&nbsp;
                    </p>
                    <p>
                        <lable for="new_pwdLabel">
                            <span class="wp_fz_14" id="new_pwdLabel"></span>:
                            <br>
                            <input type="password" name="newpassword" id="newpassword" maxlength="16" class="wp_w_250 wp_h_30 k-textbox" onfocus="g_fFcs=0">
                        </lable>
                        <br>
                        <!-- <input type="checkbox" name="rember" id="rember" class="k-checkbox"> <span class="wp_fz_11" id="remberpwd"> </span> -->&nbsp;&nbsp;&nbsp;&nbsp;
                    </p>
                     <p>
                        <lable for="confirm_new_pwd">
                            <span class="wp_fz_14" id="confirm_new_pwd"></span>:
                            <br>
                            <input type="password" name="cnewpassword" id="cnewpassword" maxlength="16" class="wp_w_250 wp_h_30 k-textbox" onfocus="g_fFcs=0" >
                        </lable>
                        <br>
                        <!-- <input type="checkbox" name="rember" id="rember" class="k-checkbox"> <span class="wp_fz_11" id="remberpwd"> </span> -->&nbsp;&nbsp;&nbsp;&nbsp;
                    </p>
                    <p>
                        <input class="btn right wp_w_155 wp_h_30 k-button" onmousedown="this.className='btnOnMseDwn right wp_w_155 wp_h_30 k-button'" id="SubmitCreds" onmouseover="this.className='btnOnMseOvr right wp_w_155 wp_h_30 k-button'"onclick="" onmouseout="this.className='btn right wp_w_155 wp_h_30 k-button'" type="submit" value="Change Password" style="margin:0px 0px 0px 0px;"name="SubmitCreds" />
                         <input class="btn left wp_w_80 wp_h_30 k-button" onmousedown="this.className='btnOnMseDwn left wp_w_80 wp_h_30 k-button'" id="SubmitCancel" onmouseover="this.className='btnOnMseOvr left wp_w_80 wp_h_30 k-button'"onclick="" onmouseout="this.className='btn left wp_w_80 wp_h_30 k-button'" type="submit" value="Cancel"name="SubmitCancel" />
                         
                        
                    </p>
                </div>
            </div>
        </form>
        </div>
    </div>
</div>
<div id="change_password_copyrightLabel"></div>
<script src="js/setting/flogon.js" type="text/javascript"></script>
<script type="text/javascript">
    <!--
    
    var g_fFcs = 1;

    function window_onload()
    {
        var pwd = document.getElementById('password');
        if (g_fFcs)
        {
            pwd.select();
            pwd.focus();
        }
    }
    -->
</script>
<script>
    $(function() {
        var i18n = {
            old_pwdLabel: 'Old Password',
            new_pwdLabel: 'New Password',
            confirm_new_pwd: 'Confirm New Password',
            SubmitCancel: 'Cancel',
            SubmitCreds:'Change Password',
            change_password_copyrightLabel: '&copy; 2014 Cognizant.All rights reserved',
            login_welcomeLabel: 'Lorem lpsum dolor sit amet,conseteture adlpsclng ellt.Maurls eget malesuada saplen.Nulla<br/>facllsl.Morbl dlctum blandlt dlam at facllsis.Maeceas suscplit nec metus laoreet.Donec eu<br/>lectus malesuada.laoreet dlam eu,condlmenetum nlsl.'
            // remberpwd: 'remberpwd',
        };
        for (v in i18n) {
            $('#' + v).html(i18n[v]);
        }

        //calculate layout
        var login_width = Workport.utils.getViewPort().width * 5 / 12;

        var login_height = Workport.utils.getDocHeight();
        var change_password_form = $('#change_password_form');
        $('#change_password').css({
            height: login_height
        });
        $('#change_password_form').css({
            paddingLeft: (login_width - 250) / 2,
            paddingTop: (login_height - 250) / 2 - 100

        });
        console.log(login_height)
        $('.change_password_logo_top').css({
            marginTop: (login_height - 138) / 2 - 100
        });

        var change_password_form_validater = $("#change_password_form").kendoValidator().data("kendoValidator");
        $('#confirm_pwd').on('keyup mouseup blur',function(){
            var new_pwd_val = $('#new_pwd').val();
            var confirm_pwd_val = $('#confirm_pwd').val();
            if(confirm_pwd_val !== new_pwd_val){
                
            }
        })
    });
</script>